<div class="row align-items-center justify-content-between mt-2">
  <div class="col-md-auto col-sm-auto col-auto">
    <div class="content-header">
      <h1>用户管理</h1>
    </div>
  </div>
  <div class="col-md-auto col-sm-auto col-auto">
    <h4 class="widget-title mb-0">
      <button class="btn btn-success btn-sm m-right-10" [routerLink]="['/admin/manage']">
        <i class="fas fa-plus"></i> 添加用户 </button>
    </h4>
  </div>
</div>

<div class="loading-shade" *ngIf="dataSource.loading$ | async">
  <mat-spinner></mat-spinner>
</div>
<div class="box box-primary">
  <div class="box-body">
    <div class="table-responsive">
      <table mat-table [dataSource]="dataSource" matSort matSortActive="email">
        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef>
            <span> 操作 </span>
          </th>
          <td mat-cell *matCellDef="let user">
            <button class="btn btn-primary btn-sm" [matMenuTriggerFor]="menu" aria-label="Action">
              <i class="fas fa-ellipsis-v"></i>
            </button>
            <mat-menu #menu="matMenu">
              <button class="btn btn-light btn-sm m-0" mat-menu-item (click)="editUser(user.id)">
                <i class="fas fa-pencil-alt"></i>
                <span class="ml-1">编辑</span>
              </button>
              <button class="btn btn-light btn-sm m-0" mat-menu-item (click)="deleteUser(user)">
                <i class="fas fa-trash-alt"></i> <span class="ml-1">删除</span>
              </button>
              <button class="btn btn-light btn-sm m-0" mat-menu-item (click)="resetPassword(user)">
                <i class="fas fa-lock"></i>
                <span class="ml-1">重置密码</span>
              </button>
            </mat-menu>
          </td>
        </ng-container>
        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 邮箱 </th>
          <td mat-cell *matCellDef="let user"> {{user.email}} </td>
        </ng-container>
        <ng-container matColumnDef="firstName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 姓名 </th>
          <td mat-cell *matCellDef="let user"> {{user.firstName}} {{user.lastName}}</td>
        </ng-container>
        <ng-container matColumnDef="phoneNumber">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 电话号码 </th>
          <td mat-cell *matCellDef="let user"> {{user.phoneNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="isAdmin">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 是否管理员 </th>
          <td mat-cell *matCellDef="let user">
            <span *ngIf="user.isAdmin" class="badge badge-success">是</span>
            <span *ngIf="!user.isAdmin" class="badge badge-warning">否</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="isActive">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 状态 </th>
          <td mat-cell *matCellDef="let user">
            <span *ngIf="user.isActive" class="badge badge-success">有效</span>
            <span *ngIf="!user.isActive" class="badge badge-warning">无效</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="loginInto">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 登录到用户 </th>
          <td mat-cell *matCellDef="let user">
            <button *ngIf="user.email !=userAuth.email && user.isActive" class="btn btn-danger btn-sm"
              (click)="loginInto(user)">
              键入登录
            </button>
          </td>
        </ng-container>
        <ng-container matColumnDef="size">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 存储大小 </th>
          <td mat-cell *matCellDef="let user">
            {{user?.size | filesize }}
          </td>
        </ng-container>

        <ng-container matColumnDef="action-search">
          <th mat-header-cell *matHeaderCellDef>
          </th>
        </ng-container>
        <ng-container matColumnDef="email-search">
          <th mat-header-cell *matHeaderCellDef style="padding: 10px 0px 10px 0px;">
            <input type="text" class="form-control w-90" [formControl]="emilFilterCtl">
          </th>
        </ng-container>
        <ng-container matColumnDef="full-name-search">
          <th mat-header-cell *matHeaderCellDef>
            <input type="text" class="form-control w-90" [formControl]="fullNameFilterCtl">
          </th>
        </ng-container>
        <ng-container matColumnDef="phone-number-search">
          <th mat-header-cell *matHeaderCellDef>
            <input type="text" class="form-control w-90" [formControl]="phoneNumberSearchFilterCtl">
          </th>
        </ng-container>
        <ng-container matColumnDef="is-admin-search">
          <th mat-header-cell *matHeaderCellDef>
          </th>
        </ng-container>
        <ng-container matColumnDef="is-active-search">
          <th mat-header-cell *matHeaderCellDef>
            <mat-slide-toggle [formControl]="isActiveSearchFilterCtl">
            </mat-slide-toggle>
          </th>
        </ng-container>
        <ng-container matColumnDef="loginInto-search">
          <th mat-header-cell *matHeaderCellDef>
          </th>
        </ng-container>
        <ng-container matColumnDef="size-search">
          <th mat-header-cell *matHeaderCellDef>
          </th>
        </ng-container>


        <!-- 底部工具栏 -->

        <ng-container matColumnDef="footer">
          <td mat-footer-cell colspan="8" *matFooterCellDef>
            <mat-paginator [length]="userResource.totalCount" [pageSize]="userResource.pageSize"
              [pageSizeOptions]="[15, 20, 30]"></mat-paginator>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
        <tr mat-header-row
          *matHeaderRowDef="['action-search','email-search','full-name-search','phone-number-search','is-admin-search','is-active-search','loginInto-search','size-search'];sticky: true"
          style="background-color: #e9eff2;">
        </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
      </table>
      <ng-container *ngIf="dataSource.count === 0">
        <div class="row">
          <div class="col-sm-12 ml-4 mt-3">
            <label class="font-weight-bold"> 没有找到数据</label>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</div>
<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
